/* 
 * Hydrant DTA.css
 * Main stylesheet for the Hydrant Digital Twin Application
 * __V3D_TEMPLATE__ - template-based file; delete this line to prevent this file from being updated 
 */

/* ===== GLOBAL SETTINGS ===== */
/* CSS Variables provide a centralized system for theme configuration.
   These variables control typography, colors, and spacing throughout the entire UI.
   Modifying these values will automatically update all elements that reference them,
   making it easier to maintain visual consistency and implement theming. */
   :root {
    /* ----- Typography ----- */
    --font-family: 'Inter', sans-serif;
    
    /* Font Sizes */
    --font-size-small: 12px;
    --font-size-normal: 14px;
    --font-size-button: 12px;
    --font-size-title: 18px;
    
    /* Font Weights */
    --font-weight-regular: 300;
    --font-weight-medium: 300;
    --font-weight-semibold: 600;
    --font-weight-bold: 600;
    
    /* Line Heights */
    --line-height-normal: 1.4;
    --line-height-heading: 1.2;
    
    /* ----- Colors ----- */
    /* Text Colors */
    --text-color-primary: #ffffff;
    --text-color-secondary: #939498;
    --text-color-black: #000000;
    
    /* UI Element Colors */
    --bg-menu: #1e1f20;
    --bg-button: #333537;
    --bg-preloader: #181818;
    --bg-preloader-bar: #c8c8c8;
    --cta-color: #00EFE8;
    --cta-color-hover: #00948A;
    --cta-color-transparent: rgba(0, 239, 232, 0.3);
    --transparent-white-10: rgba(255, 255, 255, 0.1);
    --transparent-white-20: rgba(255, 255, 255, 0.2);
    --transparent-white-30: rgba(255, 255, 255, 0.3);
    --transparent-black-10: rgba(0, 0, 0, 0.1);
    --transparent-black-30: rgba(0, 0, 0, 0.3);
    --transparent-black-50: rgba(0, 0, 0, 0.5);
    
    /* Message Colors */
    --user-message-color: #292929; /* Darker gray for user messages */
    
    /* Panel Colors */
    --bg-panel: #1e1f20;
    --bg-panel-item: #333537;
    --bg-panel-item-hover: #575757;
    --bg-panel-button: #00bfa5;
    --bg-panel-button-hover: #00a896;
    --panel-border-color: var(--transparent-white-10);
    
    /* Status Colors */
    --battery-color: #01f702;
    --water-color: #4eb6f4;
    --filter-color: #FFC107;
    
    /* ----- Filter Effects ----- */
    --icon-filter-gray: invert(60%) sepia(9%) saturate(119%) hue-rotate(202deg) brightness(89%) contrast(87%);
    --icon-filter-white: invert(100%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(100%) contrast(100%);
    --icon-filter-cta: invert(67%) sepia(91%) saturate(380%) hue-rotate(131deg) brightness(101%) contrast(101%);
    
    /* ----- Sizing & Spacing ----- */
    /* Icon Sizes */
    --icon-size-menu: 28px;
    --icon-size-nav: 20px;
    --icon-size-small: 20px;
    
    /* Menu & Navigation */
    --menu-height: 64px;
    --menu-width: 412px;
    --menu-radius: 16px;
    --menu-padding: 60px;
    
    /* Buttons */
    --button-height: 40px;
    --button-padding: 8px;
    --button-gap: 20px;
    --button-border-radius: 24px;
    
    /* Panel Dimensions */
    --panel-width: 390px;
    --panel-height: 685px;  
    --panel-border-radius: 16px;
    --panel-item-border-radius: 4px;
    
    /* Spacers */
    --panel-padding: 15px;
    --panel-gap: 10px;
    --panel-side-padding: 8px;
    --panel-row-gap: 4px;
    
    /* ----- Effects ----- */
    --shadow-panel: 0 4px 20px rgba(0, 0, 0, 0.3);
    --shadow-button: 0 2px 4px rgba(0, 0, 0, 0.3);
    --shadow-popup: 0 4px 20px rgba(0, 0, 0, 0.5);
    --shadow-glow: 0 0 8px 2px rgba(0, 239, 232, 0.4);
    --shadow-glow-hover: 0 0 12px 3px rgba(0, 239, 232, 0.5);
    
    /* ----- Transitions ----- */
    --transition-fast: 0.2s ease;
    --transition-medium: 0.3s ease;
    --transition-slow: 0.5s ease;
  
    /* ----- Z-index Layers ----- */
    --z-index-base: 1;
    --z-index-menu: 10;
    --z-index-panel: 100;
    --z-index-action-menu: 1000;
    --z-index-tutorial: 1001;
  }
  
  /* Responsive Breakpoints */
  :root {
    /* We're using CSS variables for breakpoints to maintain consistency */
    --breakpoint-sm: 480px;   /* Small mobile devices */
    --breakpoint-md: 768px;   /* Standard mobile/tablet breakpoint */
    --breakpoint-lg: 1024px;  /* Tablets and small desktops */
    --breakpoint-xl: 1200px;  /* Large desktops */
  }
  
  /* ===== BASE ELEMENTS ===== */
  /* Core element styling that establishes the foundation for the UI.
     These styles normalize the environment and set baseline behaviors
     for content positioning, scrolling, and text rendering. */
  * { 
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0); /* Removes tap blinking on iOS devices */
  }
  
  body {
    margin: 0;
    overflow: hidden;
    font-family: var(--font-family);
  }
  
  /* ===== FONT IMPORTS ===== */
  @font-face {
    font-family: 'Inter';
    font-weight: 400;
    font-style: normal;
    src: url('./fonts/Inter_18pt-Regular.ttf') format('truetype');
  }
  
  @font-face {
    font-family: 'Inter';
    font-weight: 500;
    font-style: normal;
    src: url('./fonts/Inter_18pt-Medium.ttf') format('truetype');
  }
  
  @font-face {
    font-family: 'Inter';
    font-weight: 600;
    font-style: normal;
    src: url('./fonts/Inter_18pt-SemiBold.ttf') format('truetype');
  }
  
  @font-face {
    font-family: 'Inter';
    font-weight: 700;
    font-style: normal;
    src: url('./fonts/Inter_18pt-Bold.ttf') format('truetype');
  }
  
  /* ===== 3D VIEWER COMPONENTS ===== */
  /* Styles for the 3D model viewer and related loading elements.
     These control the primary interactive canvas where users view and manipulate
     the Hydrant 3D model. The preloader elements provide visual feedback during
     the initial loading phase before the model is ready for interaction. */
  .v3d-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
  
  /* Custom Preloader Screen Styles */
  .preloader-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #d1d1d1;
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: opacity 0.5s ease;
  }
  
  .preloader-container {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
  }
  
  .preloader-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
  }
  
  .preloader-logo {
    width: 120px;
    height: auto;
    filter: brightness(0); /* Makes the logo black */
  }
  
  .preloader-bar-container {
    width: 250px;
    height: 10px;
    background-color: #a9a9a9;
    border-radius: 5px;
    overflow: hidden;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
    border: 1px solid #8e8e8e;
  }
  
  .preloader-bar-background {
    width: 100%;
    height: 100%;
    background-color: #f0f0f0;
  }
  
  .preloader-bar {
    height: 100%;
    width: 0%;
    background-color: #333333;
    transition: width 0.3s ease;
  }
  
  .preloader-percentage {
    font-family: 'Inter', sans-serif;
    font-size: 18px;
    font-weight: 600;
    color: #333333;
  }
  
  .preloader-message {
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    color: #333333;
    margin-top: 10px;
    text-align: center;
    max-width: 300px;
  }
  
  .preloader-screen.hide {
    opacity: 0;
    pointer-events: none;
  }
  
  /* Original Verge3D preloader styles */
  .v3d-simple-preloader-logo {
      background-image: url('media/hydrant.svg');
  }
  
  .v3d-simple-preloader-bar {
      background: var(--bg-panel-item);
      height: 10px;
      border-color: var(--bg-panel-item);
  }
  
  .v3d-simple-preloader-background {
      background-color: var(--bg-preloader-bar);
  }
  
  .v3d-simple-preloader-bar-container {
      border-color: var(--bg-panel-item);
      background-color: var(--bg-menu);
      box-shadow: 0 0 10px var(--shadow-glow);
  }
  
  /* ===== MODEL ANNOTATIONS ===== */
  /* Annotation styles for interactive labels within the 3D model.
     These elements display information about specific components when users
     hover over or select parts of the vacuum. The dialogs provide detailed
     descriptions and can include multiple paragraphs of information. */
  .v3d-annotation {
    width: auto;
    background-color: var(--bg-panel);
    color: var(--text-color-primary);
    border-radius: var(--panel-border-radius);
    padding: 6px 10px;
    font-family: var(--font-family);
    font-size: var(--font-size-normal);
    font-weight: var(--font-weight-regular);
    text-align: center;
    border: none; /* Explicitly set border to none */
    transition: background-color var(--transition-fast), color var(--transition-fast);
    cursor: pointer;
  }
  
  .v3d-annotation:hover {
    background-color: var(--cta-color);
    color: var(--text-color-black);
  }
  
  .v3d-annotation-dialog {
    width: 250px;
    background-color: var(--bg-panel);
    color: var(--text-color-primary);
    border-radius: var(--panel-border-radius);
    padding: 6px 10px;
    font-family: var(--font-family);
    font-size: var(--font-size-normal);
    text-align: left;
    white-space: pre-line;
    line-height: var(--line-height-normal);
    border: none; /* Explicitly set border to none */
    position: absolute; /* Ensure position is set */
    top: 100%; /* Position directly below the annotation */
    left: 50%; /* Position at the horizontal center of the parent */
    transform: translateX(-50%) translateY(10px); /* Center it horizontally and add small gap */
    box-shadow: var(--shadow-panel);
    border-left: 2px solid var(--cta-color);
  }
  
  .v3d-annotation-dialog p {
    position: relative;
    padding-bottom: 4px;
    margin-bottom: 8px;
    font-weight: var(--font-weight-regular);
  }
  
  .v3d-annotation-dialog p:not(:last-child)::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 1px;
    background-color: var(--text-color-secondary);
  }
  
  /* ===== NAVIGATION SYSTEM ===== */
  /* Navigation bar and menu components that allow users to access different
     application functions. The top navigation contains app title and utility
     buttons, while the bottom function menu provides access to the main
     application sections like dashboard, procedures, and documentation. */
  /* Common menu properties */
  #navigation-menu,
  #function-menu {
    position: fixed;
    background-color: var(--bg-menu);
    display: flex;
    align-items: center;
    z-index: var(--z-index-menu);
    box-sizing: border-box;
  }
  
  /* Navigation menu (top bar) */
  #navigation-menu {
    top: 0;
    left: 0;
    width: 100%;
    height: var(--menu-height);
    justify-content: space-between;
    padding: 0;
  }
  
  .nav-left,
  .nav-right {
    display: flex;
    align-items: center;
  }
  
  .nav-left {
    margin-left: var(--menu-padding);
  }
  
  .nav-right {
    gap: var(--button-gap);
    margin-right: var(--menu-padding);
  }
  
  #app-title {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    color: var(--text-color-primary);
    font-family: var(--font-family);
    font-size: var(--font-size-title);
    font-weight: var(--font-weight-medium);
  }
  
  /* Function menu (bottom bar) */
  #function-menu {
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    width: var(--menu-width);
    height: var(--menu-height);
    border-radius: var(--menu-radius);
    justify-content: space-around;
  }
  
  .menu-item {
    flex-direction: column;
    padding: var(--button-padding);
  }
  
  #function-menu .menu-item::after {
    content: attr(data-function);
    font-size: var(--font-size-button);
    margin-top: 4px;
    text-transform: capitalize;
  }
  
  /* ===== BUTTON DESIGN SYSTEM ===== */
  /* Comprehensive button styling system with multiple variants (circle, pill) 
     and state changes (hover, active). These components are used throughout
     the application for both navigation and actions. The system is built around
     the base .btn class with modifiers that change appearance and behavior.
     Different variants handle different use cases - circles for utility controls,
     pills for actions with text labels. */
  /* Base button styles */
  .btn {
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    cursor: pointer;
    font-size: var(--font-size-button);
    font-family: var(--font-family);
    font-weight: var(--font-weight-regular);
    padding: var(--button-padding);
    transition: color var(--transition-fast), filter var(--transition-fast);
  }
  
  .btn img {
    transition: filter var(--transition-fast);
  }
  
  /* Button shapes */
  .btn-circle {
    border-radius: 50%;
    width: var(--button-height);
    height: var(--button-height);
    padding: 0;
  }
  
  .btn-pill {
    border-radius: var(--button-border-radius);
    padding: 8px 16px;
    height: var(--button-height);
  }
  
  /* Button types */
  /* 1. Function Menu Buttons (Gray with White hover) */
  .btn-gray-to-white {
    color: var(--text-color-primary);
    background: transparent;
  }
  
  .btn-gray-to-white:hover, 
  .btn-gray-to-white.active {
    color: var(--cta-color);
  }
  
  .btn-gray-to-white img {
    filter: var(--icon-filter-white);
    width: var(--icon-size-menu);
    height: var(--icon-size-menu);
  }
  
  .btn-gray-to-white:hover img,
  .btn-gray-to-white.active img {
    filter: var(--icon-filter-cta);
  }
  
  /* 2. Navigation Buttons (White with Gray hover) */
  .btn-white-to-gray  {
    color: var(--text-color-primary);
    background-color: var(--bg-button);
  }
  
  .btn-white-to-gray:hover{
    color: var(--text-color-primary);
  }
  
  .btn-white-to-gray img {
    filter: var(--icon-filter-white) !important; /* Force white icons */
    width: var(--icon-size-nav);
    height: var(--icon-size-nav);
  }
  
  .btn-white-to-gray:hover img {
    filter: var(--icon-filter-cta) !important; /* Force gray icons on hover */
  }
  
  /* 3. Active Button Style (for interactive elements_return button) */
  .btn-active {
    background-color: var(--bg-button);
    border-radius: 50%;
    width: var(--button-height);
    height: var(--button-height);
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    cursor: pointer;
    transition: box-shadow var(--transition-fast);
    
    /* Glow effect for the button */
    box-shadow: var(--shadow-glow);
    border: 1px solid var(--cta-color-transparent);
  }
  
  .btn-active:hover {
    box-shadow: var(--shadow-glow-hover);
  }
  
  .btn-active img {
    width: var(--icon-size-nav);
    height: var(--icon-size-nav);
    filter: var(--icon-filter-cta) !important;
  }
  
  /* 4. Action Menu Buttons */
  .action-item.btn-pill {
    background-color: var(--bg-menu);
    color: var(--text-color-primary);
    box-shadow: var(--shadow-button);
  }
  
  .action-item.btn-pill img {
    filter: var(--icon-filter-white);
    width: 20px;
    height: 20px;
    margin-right: 8px;
  }
  
  .action-item.btn-pill .button-text {
    color: var(--text-color-primary);
  }
  
  /* Hover and active states */
  .action-item.btn-pill:hover,
  .action-item.btn-pill.active {
    color: var(--cta-color);
  }
  
  .action-item.btn-pill:hover img,
  .action-item.btn-pill.active img {
    filter: var(--icon-filter-cta);
  }
  
  .action-item.btn-pill:hover .button-text,
  .action-item.btn-pill.active .button-text {
    color: var(--cta-color);
  }
  
  /* Center close button special case */
  #action_close {
    background-color: var(--bg-menu);
  }
  
  #action_close img {
    width: 24px;
    height: 24px;
    margin-right: 0;
    filter: var(--icon-filter-white);
  }
  
  #action_close:hover img {
    filter: var(--icon-filter-cta);
  }
  
  /* Reset button text */
  #reset_button img {
    margin-right: 10px;
  }
  
  #reset_button .button-text {
    color: var(--text-color-primary);
  }
  
  #reset_button:hover .button-text {
    color: var(--cta-color);
  }
  
  /* Hide the default fullscreen button */
  #fullscreen-button {
    display: none !important;
  }
  
  /* ===== PANEL COMPONENT SYSTEM ===== */
  /* Panel containers form the main content areas of the application.
     Each panel represents a different functional section like dashboard,
     procedures, documents, and parts catalog. Panels have a consistent
     structure with headers, content areas, and can be dragged on desktop.
     They adapt to different content types through modifier classes. */
  .panel-container {
    position: fixed;
    top: 50%;
    right: 20px;
    transform: translateY(-50%);
    width: var(--panel-width);
    height: var(--panel-height);
    background-color: var(--bg-panel);
    border-radius: var(--panel-border-radius);
    color: var(--text-color-primary);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: var(--shadow-panel);
    z-index: var(--z-index-panel);
  }
  
  .panel-header {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 15px 20px;
    background-color: var(--bg-panel);
    border-bottom: 1px solid var(--panel-border-color);
    position: relative;
    cursor: move;
    user-select: none;
    padding-top: 25px;
  }
  
  /* === Panel Content Containers === */
  .panel-content, 
  .table-content, 
  .chat-content {
    flex: 1;
    overflow-y: auto;
    background-color: var(--bg-panel);
  }
  
  .panel-content {
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: 2px;
  }
  
  .table-content {
    padding: 8px;
  }
  
  .chat-content {
    display: flex;
    flex-direction: column;
    height: calc(100% - 56px);
    padding: 0;
    overflow: hidden;
  }
  
  /* === Panel Buttons === */
  .panel-close-btn, 
  .panel-collapse-btn, 
  #cart-purchase {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: var(--bg-panel-item);
    width: 36px;
    height: 36px;
    border-radius: var(--panel-item-border-radius);
  }
  
  .panel-close-btn, 
  .panel-collapse-btn {
    left: var(--panel-padding);
  }
  
  #cart-purchase {
    right: var(--panel-padding);
  }
  
  .panel-close-btn:hover, 
  .panel-collapse-btn:hover, 
  #cart-purchase:hover {
    background-color: var(--bg-panel-item-hover);
  }
  
  /* === Typography & Text Elements === */
  .panel-title, 
  .part-name, 
  .panel-controls h3, 
  .panel-item h3 {
    font-size: var(--font-size-normal);
    font-weight: var(--font-weight-bold);
    margin: 0 0 8px 0;
    text-align: left;
    color: var(--text-color-primary);
  }
  
  .panel-header .panel-title {
    font-size: var(--font-size-title);
    font-weight: var(--font-weight-semibold);
    text-align: center;
    width: 100%;
  }
  
  .panel-value, 
  .part-price {
    font-size: var(--font-size-normal);
    color: var(--text-color-primary);
    font-weight: 400 !important;
    font-family: var(--font-family) !important;
  }
  
  .panel-value {
    text-align: right;
    margin-left: auto;
  }
  
  .panel-description, 
  .part-description, 
  .section-header td {
    font-size: var(--font-size-small);
    color: var(--text-color-secondary);
  }
  
  .panel-label {
    font-size: var(--font-size-normal);
    font-weight: var(--font-weight-bold);
    text-align: left;
    min-width: fit-content;
  }
  
  .table-row td, 
  .extras-row td, 
  .part-item, .part-item_active, 
  .part-item table tr td, .part-item_active table tr td {
    font-size: var(--font-size-normal);
    font-weight: var(--font-weight-medium);
    background-color: var(--bg-panel-item);
    border-radius: var(--panel-item-border-radius);
    padding: var(--panel-padding);
    color: var(--text-color-primary);
    transition: background-color var(--transition-fast);
    cursor: pointer;
  }
  
  .panel-item:hover, 
  .table-row:hover td, 
  .extras-row:hover td {
    background-color: var(--bg-panel-item-hover);
  }
  
  /* Section headers exception */
  .section-header td, 
  .section-header:hover td {
    background-color: transparent !important;
    cursor: default !important;
  }
  
  /* === Dashboard-specific styles === */
  .panel-item {
    background-color: var(--bg-panel-item);
    border-radius: var(--panel-item-border-radius);
    padding: var(--panel-padding);
    margin-bottom: 4px;
  }
  
  .panel-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--panel-row-gap);
  }
  
  /* No hover effect on dashboard items to match the second image */
  #dashboard-container .panel-item {
    cursor: default;
  }
  
  #dashboard-container .panel-item:hover {
    background-color: var(--bg-panel-item);
  }
  
  /* Adjust spacing for label-value pairs */
  #dashboard-container .panel-row .panel-label,
  #dashboard-container .panel-row .panel-title {
    margin-bottom: 0;
  }
  
  /* Style for the cleaning status rows */
  #dashboard-container .panel-item h3.panel-title {
    margin-bottom: 8px;
  }
  
  /* Panel item that contains next service needs special styling */
  #dashboard-container .panel-item .next-service .panel-label {
    font-weight: var(--font-weight-bold);
  }
  
  /* === Controls & Indicators === */
  .panel-controls {
    background-color: var(--bg-panel-item);
    border-radius: var(--panel-item-border-radius);
    padding: var(--panel-padding);
    gap: 8px;
    margin-top: 0;
    display: flex;
    flex-direction: column;
  }
  
  /* Controls title needs to be at the top with proper spacing */
  .panel-controls .panel-title {
    margin-bottom: 8px;
  }
  
  .panel-button {
    background-color: var(--cta-color);
    color: var(--text-color-black);
    border: none;
    border-radius: 25px;
    padding: 12px 15px;
    width: 100%;
    font-size: var(--font-size-normal);
    font-weight: var(--font-weight-bold);
    cursor: pointer;
    text-align: center;
    text-transform: none;
    transition: all var(--transition-fast);
  }
  
  .panel-button:hover {
    background-color: var(--cta-color-hover);
  }
  
  .panel-select-container {
    width: 100%;
  }
  
  #cleaning-mode {
    width: 100%;
    text-align: center;
    background-color: var(--cta-color);
    color: var(--text-color-black);
    border: none;
    border-radius: 25px;
    padding: 12px 15px;
    font-size: var(--font-size-normal);
    font-weight: var(--font-weight-bold);
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url('media/dropdown.svg');
    background-repeat: no-repeat;
    background-position: right 15px center;
    background-size: 12px;
  }
  
  /* Indicators for battery, water, filter */
  .indicator-container {
    width: 100%;
    height: 8px;
    background-color: var(--transparent-white-10);
    border-radius: 4px;
    overflow: hidden;
    margin-top: 10px;
  }
  
  .indicator {
    height: 100%;
    width: 100%;
  }
  
  .indicator-level {
    height: 100%;
    border-radius: 4px;
    transition: width var(--transition-medium);
  }
  
  .battery-indicator .indicator-level { background-color: var(--battery-color); }
  .water-indicator .indicator-level { background-color: var(--water-color); }
  .filter-indicator .indicator-level { background-color: var(--filter-color); }
  
  /* === TABLE COMPONENTS ===== */
  /* Specialized table layouts used in multiple panels for displaying
     structured data like procedures, parts catalog, and extras menu.
     These components ensure consistent spacing and alignment of data. */
  .table-wrapper {
    width: 100%;
  }
  
  .panel-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0 4px;
    table-layout: fixed;
  }
  
  /* === EXTRAS PANEL COMPONENTS ===== */
  /* Components for the extras panel that provides access to secondary
     functions like settings, support, and information. Items use a
     consistent layout with icons, text, and expand indicators. */
  .extras-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
  }
  
  .left-content {
    display: flex;
    align-items: center;
    gap: 8px;
  }
  
  .small-icon {
    width: 20px;
    height: 20px;
    filter: var(--icon-filter-white);
  }
  
  .expand-icon {
    width: 16px;
    height: 16px;
    filter: var(--icon-filter-gray);
  }
  
  .extras-row:hover .expand-icon {
    filter: var(--icon-filter-white);
  }
  
  /* === PARTS CATALOG COMPONENTS ===== */
  /* Specialized components for the parts catalog section that displays
     replacement components with names, descriptions, prices, and purchase
     options. Each part can be selected and added to the shopping cart. */
  .part-item, .part-item_active {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: var(--bg-panel-item);
    border-radius: var(--panel-item-border-radius);
    padding: 8px var(--panel-padding);
    color: var(--text-color-primary);
    transition: background-color var(--transition-fast);
    cursor: pointer;
    margin-bottom: 4px;
  }
  
  .part-item:last-child, .part-item_active:last-child {
    margin-bottom: 0;
  }
  
  .part-name {
    font-weight: var(--font-weight-semibold);
    margin: 0;
  }
  
  /* Remove the grid positioning for description and price since they won't be used */
  .part-description,
  .part-price {
    display: none;
  }
  
  .cart-add {
    background-color: var(--cta-color);
    color: var(--text-color-primary);
    border-radius: 4px;
    width: 36px;
    height: 36px;
    font-size: var(--font-size-small);
    font-weight: var(--font-weight-medium);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color var(--transition-fast);
    position: relative;
    background-image: url('./media/cart_add.svg');
    background-position: center;
    background-repeat: no-repeat;
    background-size: 24px;
  }
  
  .cart-add:hover {
    background-color: var(--cta-color-hover);
  }
  
  /* === CHATBOT INTERFACE ===== */
  /* AI assistant chat interface that allows users to ask questions and
     receive support. Includes message bubbles for both user and bot messages,
     an input field with send button, and scroll behavior for conversation history. */
  .chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  
  .chatbot-message {
    max-width: 80%;
    padding: 10px 12px;
    border-radius: 12px;
    font-size: var(--font-size-normal);
    line-height: var(--line-height-normal);
    margin-bottom: 4px;
  }
  
  .chatbot-message p {
    margin: 0;
  }
  
  .user-message {
    align-self: flex-end;
    background-color: var(--user-message-color);
    color: var(--text-color-primary);
    border-bottom-right-radius: 4px;
  }
  
  .bot-message {
    align-self: flex-start;
    background-color: var(--bg-panel-item);
    color: var(--text-color-primary);
    border-bottom-left-radius: 4px;
  }
  
  .chat-input-container {
    display: flex;
    padding: 10px;
    border-top: 1px solid var(--panel-border-color);
    align-items: center;
    background-color: var(--bg-panel);
  }
  
  .chat-input {
    flex: 1;
    padding: 10px 15px;
    border: none;
    border-radius: 20px;
    background-color: var(--bg-panel-item);
    color: var(--text-color-primary);
    font-size: var(--font-size-normal);
    font-family: var(--font-family);
    outline: none;
    margin-right: 10px;
  }
  
  .chat-input::placeholder {
    color: var(--text-color-secondary);
  }
  
  #chat-send {
    background-color: var(--bg-panel-item);
    width: 36px;
    height: 36px;
  }
  
  #chat-send:hover {
    background-color: var(--bg-panel-item-hover);
  }
  
  #chat-send img {
    width: 20px;
    height: 20px;
  }
  
  /* === DASHBOARD STATUS COMPONENTS ===== */
  /* Specialized components for the dashboard panel that display
     hydrant status, maintenance history, and network metrics.
     These use consistent styling but with specific layout adjustments. */

  /* Clean up old CSS by removing RoboVac specific styles */
  .cleaning-status,
  .cleaning-status .panel-row,
  .cleaning-status .panel-label,
  .cleaning-status .panel-value,
  .next-service,
  #cleaning-map,
  .cleaning-mode,
  .indicator-container,
  .battery-indicator,
  .water-indicator,
  .filter-indicator,
  .panel-select-container,
  #cleaning-mode {
    /* Remove these properties as they're from RoboVac app */
    display: none;
  }

  /* --- General Dashboard Panel Styling --- */
  #dashboard-container .panel-item {
    padding: 15px;
    margin-bottom: 8px;
  }

  #dashboard-container .panel-item h3.panel-title {
    margin-bottom: 15px;
    color: var(--text-color-primary);
    font-size: var(--font-size-normal);
    font-weight: var(--font-weight-bold);
    font-family: var(--font-family);
  }

  /* --- Status Distribution Chart --- */
  .chart-container {
    background-color: transparent;
    border-radius: var(--panel-item-border-radius);
    margin-bottom: 10px;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    height: 200px;
    overflow: hidden;
    position: relative;
  }

  .chart-container svg {
    position: relative;
    z-index: 2;
  }

  /* Add grid lines styling */
  .chart-container::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
      linear-gradient(to right, rgba(255,255,255,0.1) 1px, transparent 1px),
      linear-gradient(to bottom, rgba(255,255,255,0.1) 1px, transparent 1px);
    background-size: 20% 20%;
    z-index: 1;
  }

  /* Styling for the rect (bar) elements in the chart */
  rect {
    transition: opacity 0.3s ease, transform 0.2s ease;
  }

  rect:hover {
    opacity: 0.8;
    transform: translateY(-3px);
  }

  /* Google Charts Tooltip styling */
  .google-visualization-tooltip {
    background-color: rgba(0, 0, 0, 0.85) !important;
    border: 1px solid var(--cta-color) !important;
    border-radius: 6px !important;
    box-shadow: 0 0 6px rgba(0, 239, 232, 0.4) !important;
    padding: 6px 10px !important;
    color: white !important;
    font-family: var(--font-family) !important;
    font-size: 12px !important;
    font-weight: normal !important;
    max-width: 150px !important;
    min-width: auto !important;
    pointer-events: none;
    z-index: 100;
  }

  /* Styling for the legend items under the chart */
  .status-legend {
    display: flex;
    flex-direction: column;
    padding: 8px 5px;
    margin-top: 10px;
    justify-content: center;
    background-color: rgba(0, 0, 0, 0.2);
    border-radius: 4px;
    gap: 8px;
  }

  .legend-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    width: 100%;
    gap: 8px;
  }

  .legend-item {
    display: flex;
    align-items: center;
    font-size: 11px;
    color: var(--text-color-primary);
    padding: 2px 5px;
    font-family: var(--font-family);
    background-color: rgba(0, 0, 0, 0.3);
    border-radius: 4px;
    white-space: nowrap;
  }

  /* Bullet point styling for legend dots */
  .legend-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-right: 4px;
    border: 1px solid rgba(255, 255, 255, 0.3);
  }

  /* Colors for different hydrant statuses */
  .status-legend div:nth-child(1)::before {
    background-color: #2ecc71; /* Green for Functional */
  }

  .status-legend div:nth-child(2)::before {
    background-color: #f1c40f; /* Yellow for Maintenance */
  }

  .status-legend div:nth-child(3)::before {
    background-color: #c0392b; /* Dark Red for Critical */
  }

  .status-legend div:nth-child(4)::before {
    background-color: #e74c3c; /* Red for Under Repair */
  }

  .status-legend div:nth-child(5)::before {
    background-color: #e67e22; /* Orange for Scheduled Check */
  }

  .status-legend div:nth-child(6)::before {
    background-color: #3498db; /* Blue for Recently Serviced */
  }

  .status-legend div:nth-child(7)::before {
    background-color: #95a5a6; /* Grey for Pending Inspection */
  }

  /* Legend item styling */
  div.legend-item {
    display: flex;
    align-items: center;
    font-size: var(--font-size-small);
    color: var(--text-color-primary);
    margin-bottom: 4px;
    font-family: var(--font-family);
  }

  /* Status values with percentages styling */
  #dashboard-container .panel-item .panel-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
    padding: 5px 10px;
    background-color: var(--bg-panel-item);
    border-radius: var(--panel-item-border-radius);
    font-family: var(--font-family);
    font-size: var(--font-size-normal);
  }

  #dashboard-container .panel-item .panel-row span:first-child {
    display: flex;
    align-items: center;
  }

  #dashboard-container .panel-item .panel-row span:first-child::before {
    content: "";
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-right: 10px;
  }

  #dashboard-container .panel-item .panel-row:nth-child(1) span:first-child::before {
    background-color: #2ecc71; /* Green for Functional */
  }

  #dashboard-container .panel-item .panel-row:nth-child(2) span:first-child::before {
    background-color: #f1c40f; /* Yellow for Maintenance */
  }

  #dashboard-container .panel-item .panel-row:nth-child(3) span:first-child::before {
    background-color: #c0392b; /* Dark Red for Critical */
  }

  #dashboard-container .panel-item .panel-row:nth-child(4) span:first-child::before {
    background-color: #e74c3c; /* Red for Under Repair */
  }

  #dashboard-container .panel-item .panel-row:nth-child(5) span:first-child::before {
    background-color: #e67e22; /* Orange for Scheduled Check */
  }

  #dashboard-container .panel-item .panel-row:nth-child(6) span:first-child::before {
    background-color: #3498db; /* Blue for Recently Serviced */
  }

  #dashboard-container .panel-item .panel-row:nth-child(7) span:first-child::before {
    background-color: #95a5a6; /* Grey for Pending Inspection */
  }

  /* --- Network Map --- */
  .map-container {
    width: 100%;
    height: 200px;
    border-radius: var(--panel-item-border-radius);
    overflow: hidden;
  }

  /* --- Network Metrics --- */
  #dashboard-container .panel-item:nth-of-type(3) {
    padding: 15px;
    display: flex;
    flex-direction: column;
  }

  /* Fix Google Charts SVG text rendering */
  svg text {
    font-family: var(--font-family) !important;
    fill: var(--text-color-primary) !important;
  }

  /* Gauges container styles */
  .gauges-container {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 30px;
    margin: 0 auto 15px auto;
    height: auto;
    width: 100%;
  }

  .gauge-container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: auto;
    width: 120px;
  }

  /* Fix Google Charts SVG rendering */
  .gauge-container svg {
    width: 100%;
    height: auto;
  }

  /* Pressure and flow rate text styling */
  .pressure-stats {
    margin: 5px auto;
    text-align: center;
    color: var(--text-color-secondary);
    font-family: var(--font-family);
    font-size: var(--font-size-normal);
    line-height: var(--line-height-normal);
    background-color: var(--bg-panel-item);
    border-radius: var(--panel-item-border-radius);
    padding: 10px;
    width: 90%;
  }

  /* --- Maintenance History --- */
  #dashboard-container .panel-item:nth-of-type(4) {
    padding: 15px;
    display: flex;
    flex-direction: column;
    min-height: 200px;
  }

  .maintenance-history {
    min-height: 120px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    background-color: var(--bg-panel-item);
    border-radius: var(--panel-item-border-radius);
    padding: 12px;
    width: 95%;
    margin: 0 auto;
    overflow-y: auto;
    max-height: 180px;
    position: relative;
    scrollbar-width: thin; /* For Firefox */
  }
  
  .maintenance-history::-webkit-scrollbar {
    width: 8px;
    background-color: transparent;
  }
  
  .maintenance-list {
    width: 100%;
    font-family: var(--font-family);
    font-size: var(--font-size-small);
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  .maintenance-history:empty {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .maintenance-placeholder {
    color: var(--text-color-secondary);
    text-align: center;
    padding: 30px 0;
    font-family: var(--font-family);
    font-size: var(--font-size-normal);
    line-height: var(--line-height-normal);
    font-weight: var(--font-weight-regular);
  }

  /* Styling for maintenance items that appear when clicking on a hydrant */
  .maintenance-item {
    padding: 12px;
    margin-bottom: 0;
    border-radius: var(--panel-item-border-radius);
    background-color: rgba(255, 255, 255, 0.05);
    border-left: 3px solid var(--cta-color);
    transition: transform 0.2s ease, background-color 0.2s ease;
  }

  .maintenance-item:hover {
    background-color: rgba(255, 255, 255, 0.08);
    transform: translateX(2px);
  }

  .maintenance-date {
    font-weight: var(--font-weight-bold);
    color: var(--cta-color);
    margin-bottom: 5px;
    font-size: 13px;
  }

  .maintenance-type {
    font-weight: var(--font-weight-semibold);
    margin-bottom: 5px;
    color: white;
  }

  .maintenance-notes {
    color: var(--text-color-secondary);
    font-size: var(--font-size-small);
    line-height: var(--line-height-normal);
  }
  
  /* === MEDIA CONTENT COMPONENTS ===== */
  /* Components for displaying images and videos within panels.
     Includes responsive scaling for different screen sizes and
     maintains aspect ratios for embedded content. */
  .panel-image {
    width: 100%;
    height: auto;
    max-height: 350px;
    border-radius: var(--panel-item-border-radius);
    margin-bottom: 8px;
    object-fit: contain;
    display: block;
  }
  
  /* Map container styling */
  #cleaning-map {
    padding: 0;
    overflow: hidden;
    display: none;
  }
  
  #cleaning-map.panel-item {
    height: auto;
    overflow: visible;
    padding-bottom: 15px;
  }
  
  #cleaning-map img {
    width: 100%;
    height: auto;
    border-radius: var(--panel-item-border-radius) var(--panel-item-border-radius) 0 0;
    display: block;
    margin: 0;
  }
  
  #map-title {
    padding: var(--panel-padding);
    margin: 0;
  }
  
  /* === VIDEO TUTORIAL ===== */
  .video-content {
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--bg-panel);
  }
  
  .video-wrapper {
    width: 100%;
    height: 0;
    padding-bottom: 56.25%; /* 16:9 aspect ratio */
    position: relative;
    overflow: hidden;
  }
  
  .video-wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: var(--panel-item-border-radius);
  }
  
  /* === INFORMATION PANEL ===== */
  /* Components specific to the information/help panel that explains
     application features and interactions. Organizes content into
     clearly defined sections with icons and descriptions. */
  .info-container-wrapper {
    width: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    box-sizing: border-box;
    padding: 0;
  }
  
  .info-section {
    background-color: var(--bg-panel-item);
    border-radius: var(--panel-item-border-radius);
    padding: var(--panel-padding);
    margin: 0 8px 4px 8px;
    cursor: default;
  }
  
  .info-section:hover {
    background-color: var(--bg-panel-item);
  }
  
  .info-item {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
    color: var(--text-color-primary);
    font-size: var(--font-size-normal);
  }
  
  .info-item:last-child {
    margin-bottom: 0;
  }
  
  .info-container-wrapper .section-header {
    padding: 10px var(--panel-padding) 4px var(--panel-padding);
    margin: 0;
    font-weight: var(--font-weight-regular);
    color: var(--text-color-secondary);
    text-align: left;
  }
  
  #info-container .table-content {
    padding: 8px 0;
  }
  
  /* === CHECK INDICATORS ===== */
  /* Check mark icons used in selection interfaces like the
     cut direction settings panel. They indicate the currently
     selected option and can represent different axis choices. */
  .check-icon {
    width: 16px;
    height: 16px;
    filter: var(--icon-filter-cta);
  }
  
  .check-icon-x {
    display: block; /* Default state */
  }
  
  .check-icon-y,
  .check-icon-z {
    display: none; /* Default state */
  }
  
  /* === PROCEDURE COMPONENTS ===== */
  /* Components for the step-by-step maintenance procedure interface.
     Includes playback controls, step descriptions, and navigation
     between instructions. Designed for clear, guided user workflows. */
  .procedure-controls {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 50px;
    margin-bottom: 5px;
    padding: 5px;
  }
  
  .procedure-control-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background-color: var(--bg-panel-item);
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color var(--transition-fast);
  }
  
  .procedure-control-btn:hover {
    background-color: var(--bg-panel-item-hover);
  }
  
  .procedure-control-btn img {
    width: 20px;
    height: 20px;
    filter: var(--icon-filter-white);
  }
  
  .procedure-step {
    background-color: var(--bg-panel-item);
    border-radius: var(--panel-item-border-radius);
    padding: var(--panel-padding);
    margin-bottom: 10px;
  }
  
  .procedure-description {
    font-size: var(--font-size-normal);
    color: var(--text-color-primary);
    line-height: var(--line-height-normal);
    margin: 0;
  }
  
  /* === SCROLLBAR CUSTOMIZATION ===== */
  /* Custom styling for scrollbars to match the application theme.
     Provides thin, subtle scrollbars that integrate with the UI
     while maintaining usability for navigating overflowing content. */
  .panel-content::-webkit-scrollbar,
  .table-content::-webkit-scrollbar,
  .chat-messages::-webkit-scrollbar,
  .info-container-wrapper::-webkit-scrollbar,
  .maintenance-history::-webkit-scrollbar,
  .maintenance-list::-webkit-scrollbar {
    width: 8px;
  }
  
  .panel-content::-webkit-scrollbar-track,
  .table-content::-webkit-scrollbar-track,
  .chat-messages::-webkit-scrollbar-track,
  .info-container-wrapper::-webkit-scrollbar-track,
  .maintenance-history::-webkit-scrollbar-track,
  .maintenance-list::-webkit-scrollbar-track {
    background: var(--transparent-black-10);
  }
  
  .panel-content::-webkit-scrollbar-thumb,
  .table-content::-webkit-scrollbar-thumb,
  .chat-messages::-webkit-scrollbar-thumb,
  .info-container-wrapper::-webkit-scrollbar-thumb,
  .maintenance-history::-webkit-scrollbar-thumb,
  .maintenance-list::-webkit-scrollbar-thumb {
    background: var(--transparent-white-20);
    border-radius: 4px;
  }
  
  .panel-content::-webkit-scrollbar-thumb:hover,
  .table-content::-webkit-scrollbar-thumb:hover,
  .chat-messages::-webkit-scrollbar-thumb:hover,
  .info-container-wrapper::-webkit-scrollbar-thumb:hover,
  .maintenance-history::-webkit-scrollbar-thumb:hover,
  .maintenance-list::-webkit-scrollbar-thumb:hover {
    background: var(--transparent-white-30);
  }
  
  /* === ACTION MENU SYSTEM ===== */
  /* Context menu that appears when clicking on a 3D component.
     Provides component-specific actions like explode view, isolate,
     documentation access, and purchase options. Positioned relative
     to the selected 3D model component. */
  .action-menu {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: block;
    z-index: var(--z-index-action-menu);
    background-color: transparent;
    width: 320px;
    height: 160px;
  }
  
  /* Action menu buttons positioning */
  #action_close {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 40px;
    height: 40px;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
  }
  
  #explode_button {
    position: absolute;
    left: calc(50% - 100px - 40px);
    top: 50%;
    transform: translateY(-50%);
  }
  
  #isolate_button {
    position: absolute;
    right: calc(50% - 100px - 40px);
    top: 50%;
    transform: translateY(-50%);
  }
  
  #buy_button {
    position: absolute;
    top: calc(50% - 40px - 40px);
    left: 50%;
    transform: translateX(-50%);
  }
  
  #document_button {
    position: absolute;
    bottom: calc(50% - 40px - 40px);
    left: 50%;
    transform: translateX(-50%);
  }
  
  /* === TUTORIAL SYSTEM ===== */
  .tutorial-overlay {
    position: fixed;
    inset: 0;
    background-color: transparent;
    z-index: var(--z-index-tutorial);
    display: none;
  }
  
  .tutorial-step {
    position: absolute;
    bottom: 120px;
    left: 50%;
    transform: translateX(-50%);
    width: 360px;
    z-index: var(--z-index-tutorial);
  }
  
  .tutorial-card {
    background-color: var(--bg-panel);
    border-radius: var(--panel-border-radius);
    padding: 15px; /* Reduced padding from 20px to 15px */
    position: relative;
    box-shadow: var(--shadow-panel);
  }
  
  .tutorial-close {
    position: absolute;
    top: 15px; /* Adjusted to match new padding */
    right: 15px; /* Adjusted to match new padding */
  }
  
  .tutorial-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    color: var(--text-color-primary);
    gap: 8px; /* Reduced gap from 12px to 8px */
  }
  
  .tutorial-image {
    width: 200px;
    height: 70px; /* Reduced height from 80px to 70px */
    border-radius: 8px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--bg-panel);
    margin-bottom: 5px; /* Added small margin to reduce space to title */
  }
  
  .tutorial-image img {
    width: 80%;
    filter: brightness(0) invert(1);
  }
  
  .tutorial-content h3 {
    margin-top: 0; /* Reduced from 5px to 0 */
    margin-bottom: 5px; /* Added to reduce space to text below */
  }
  
  .tutorial-content p {
    color: var(--text-color-secondary);
    margin: 0;
    line-height: 1.4; /* Slightly reduced from 1.5 */
  }
  
  /* Change Android: and iOS: to primary text color */
  .tutorial-content p strong {
    color: var(--text-color-primary);
  }
  
  /* Tutorial message styles */
  .tutorial-message {
    position: absolute;
    background-color: var(--bg-panel);
    border-radius: var(--panel-border-radius);
    padding: 20px;
    color: var(--text-color-primary);
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 320px;
    min-height: 150px;
    box-sizing: border-box;
    box-shadow: var(--shadow-panel);
    z-index: var(--z-index-tutorial);
    opacity: 1;
    transition: opacity var(--transition-slow);
  }
  
  .tutorial-message p {
    margin: 0;
    font-size: var(--font-size-normal);
    line-height: var(--line-height-normal);
  }
  
  .tutorial-message .button-container {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    margin-top: auto;
  }
  
  .tutorial-message .tutorial-next,
  .tutorial-message .tutorial-end {
    flex: 1;
    padding: 12px 16px;
    border-radius: 20px;
    border: none;
    cursor: pointer;
    font-size: var(--font-size-button);
    font-weight: var(--font-weight-bold);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
  }
  
  .tutorial-message .tutorial-next {
    background-color: var(--cta-color);
    color: var(--text-color-black);
  }
  
  .tutorial-message .tutorial-next:hover {
    background-color: var(--cta-color-hover);
  }
  
  .tutorial-message .tutorial-end {
    background-color: var(--bg-panel-item);
    color: var(--text-color-primary);
  }
  
  .tutorial-message .tutorial-end:hover {
    background-color: var(--bg-panel-item-hover);
  }
  
  /* Tutorial buttons */
  .tutorial-buttons {
    margin-top: 5px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
  }
  
  .tutorial-buttons .btn {
    width: 100%;
    justify-content: center;
    font-weight: var(--font-weight-bold);
    font-size: calc(var(--font-size-button) + 1px);
  }
  
  .tutorial-buttons .btn:first-child {
    background-color: var(--cta-color);
    color: var(--text-color-black);
  }
  
  .tutorial-buttons .btn:first-child:hover {
    background-color: var(--cta-color-hover);
  }
  .fade-out {
    opacity: 0 !important;
    transition: opacity var(--transition-slow) !important;
  }
  /* Tutorial highlight effect - add this to your CSS file */
  .tutorial-highlight {
    animation: glow 1.5s infinite alternate;
    box-shadow: 0 0 10px var(--cta-color);
    position: relative;
    z-index: var(--z-index-tutorial);
    transition: box-shadow 0.5s ease, border-top 0.5s ease;
  }
  
  /* Class added during fade-out transition */
  .tutorial-highlight-fade {
    animation: none !important;
    box-shadow: 0 0 0 transparent !important;
    border-top-color: var(--transparent-white-10) !important; 
    transition: box-shadow 0.5s ease, border-top-color 0.5s ease !important;
  }
  
  @keyframes glow {
    from {
        box-shadow: 0 0 5px var(--cta-color);
    }
    to {
        box-shadow: 0 0 15px var(--cta-color), 0 0 20px var(--cta-color);
    }
  }
  
  /* === INTERACTION HINTS ===== */
  /* Contextual help system that provides hints about how to interact
     with the 3D model. Appears at key moments to guide user actions
     like clicking on components. Includes fade animations and icons. */
  .interaction-hint {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: var(--z-index-tutorial);
    display: flex;
    flex-direction: column;
    align-items: center;
    pointer-events: auto;
    opacity: 1;
    transition: opacity var(--transition-slow);
    font-family: var(--font-family);
  }
  
  .interaction-hint.fade-out {
    opacity: 0;
  }
  
  .hint-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--panel-gap);
    padding: var(--panel-padding);
  }
  
  .tap-icon {
    width: var(--menu-height);
    height: var(--menu-height);
    filter: var(--icon-filter-cta);
    animation: pulse 1.5s infinite;
  }
  
  .hint-content p {
    color: var(--text-color-black);
    font-size: var(--font-size-title);
    font-weight: var(--font-weight-bold);
    margin: 0;
    white-space: nowrap;
  }
  
  /* === ANIMATIONS ===== */
  /* Keyframe animations used throughout the UI for subtle motion effects.
     The pulse animation creates attention-drawing effects for interactive elements. */
  
  @keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.1); }
    100% { transform: scale(1); }
  }
  
  /* === UNAVAILABLE POPUP ===== */
  /* Popup message that appears when a feature is unavailable */
  .unavailable-popup {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: var(--bg-panel);
    color: var(--text-color-primary);
    border-radius: var(--panel-border-radius);
    padding: 8px 12px;
    font-family: var(--font-family);
    font-weight: var(--font-weight-regular);
    text-align: center;
    z-index: var(--z-index-tutorial);
    box-shadow: var(--shadow-popup);
    display: none; /* Hidden by default */
    min-width: 200px;
  }
  
  .unavailable-popup p {
    margin: 0;
    font-size: var(--font-size-normal);
  }
  
  /* === RESPONSIVE DESIGN ===== */
  /* Mobile-specific adjustments for smaller screens (under 1024px width).
     These rules modify layout, sizing, and positioning to optimize
     the interface for touch interaction and limited screen real estate. */
  @media screen and (max-width: 1024px) {
    /* Navigation menus */
    #navigation-menu {
      padding: 0 10px;
    }
    
    .nav-left {
      margin-left: 10px;
    }
    
    .nav-right {
      margin-right: 10px;
    }
    
    #function-menu {
      width: 100%;
      bottom: 0;
      left: 0;
      border-radius: 0;
      transform: none;
    }
  
    /* Panel containers */
    .panel-container {
      width: 100%;
      right: 0;
      left: 0;
      transform: none;
      border-radius: 0;
      bottom: 64px;
      top: auto;
    }
  
    /* Panel heights */
    #dashboard-container,
    #chatbot-container {
      height: 50vh;
    }
  
    #procedures-container,
    #procedures-menu-container,
    #documents-SS00-container,
    #documents-SS00_01-container,
    #documents-SS00_02-container,
    #documents-SS01_01-container,
    #documents-SS01_02-container,
    #documents-SS01_03-container,
    #documents-SS01_04-container,
    #documents-SS01_05-container,
    #documents-SS01_06-container,
    #documents-SS01_07-container,
    #documents-SS02_01-container,
    #documents-SS02_02-container,
    #documents-SS02_03-container,
    #extras-container,
    #support-container,
    #info-container,
    #cut-container,
    #video-tutorial-container,
    #parts-SS00-container,
    #parts-SS00_01-container,
    #parts-SS00_02-container,
    #parts-SS01_01-container,
    #parts-SS01_02-container,
    #parts-SS01_03-container,
    #parts-SS01_04-container,
    #parts-SS01_05-container,
    #parts-SS01_06-container,
    #parts-SS01_07-container,
    #parts-SS02_01-container,
    #parts-SS02_02-container,
    #parts-SS02_03-container {
      height: 25vh;
    }
  
    /* Disable dragging on mobile */
    .panel-header {
      cursor: default;
      padding: 8px 15px;
      padding-top: 15px;
      min-height: 40px;
    }
  
    /* Remove border radius from panel components */
    .panel-item, 
    .table-row td, 
    .extras-row td, 
    .part-item, .part-item_active,
    .procedure-step,
    .info-section,
    .panel-controls,
    .indicator-container,
    .indicator-level,
    .video-wrapper iframe,
    .panel-image,
    .chatbot-message {
      border-radius: 0;
    }
  
    /* Action Menu Mobile Layout */
    .action-menu {
      position: fixed;
      top: var(--menu-height);
      left: 0;
      width: 100%;
      height: var(--menu-height);
      transform: none;
      background-color: var(--bg-menu);
      display: flex;
      justify-content: space-around;
      align-items: center;
      border-top: 1px solid var(--transparent-white-10);
      z-index: 1000;
    }
  
    /* Reset action menu button positions */
    #explode_button,
    #isolate_button,
    #buy_button,
    #document_button,
    #action_close {
      position: static;
      transform: none;
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      background-color: transparent;
      box-shadow: none;
      border-radius: 0;
    }
  
    /* Mobile action menu styling */
    .action-menu .action-item {
      background-color: transparent;
      color: var(--text-color-primary);
      padding: var(--button-padding);
      height: auto;
      box-shadow: none;
    }
  
    .action-menu .action-item.btn-pill {
      border-radius: 0;
    }
  
    .action-menu .action-item img {
      margin-right: 0;
      margin-bottom: 4px;
      width: var(--icon-size-menu);
      height: var(--icon-size-menu);
    }
  
    .action-menu .action-item::after {
      content: attr(data-action);
      font-size: var(--font-size-button);
      color: var(--text-color-primary);
      text-transform: capitalize;
      display: block;
      margin-top: 4px;
    }
  
    #action_close::after {
      content: "Close";
    }
  
    .action-menu .action-item:hover,
    .action-menu .action-item.active {
      color: var(--text-color-primary);
    }
  
    .action-menu .action-item:hover img,
    .action-menu .action-item.active img {
      filter: var(--icon-filter-cta);
    }
  
    .action-menu .action-item:hover::after,
    .action-menu .action-item.active::after {
      color: var(--cta-color);
    }
  
    .action-menu .action-item.btn-pill .button-text {
      display: none;
    }
  
    /* Special handling for highlight effect on mobile action menu */
    .action-menu.tutorial-highlight {
      box-shadow: 0 0 15px var(--cta-color), 0 0 15px var(--cta-color);
      border-top: 1px solid var(--cta-color);
      z-index: var(--z-index-tutorial);
      transition: box-shadow 0.5s ease, border-top-color 0.5s ease;
    }
    
    /* Handle fade-out transition specifically for mobile menu */
    .action-menu.tutorial-highlight.tutorial-highlight-fade {
      box-shadow: none;
      border-top-color: var(--transparent-white-10);
    }
  
    /* Tutorial mobile adjustments */
    .tutorial-step {
      width: 90%;
      max-width: 360px;
    }
  
    .tutorial-message {
      max-width: calc(100% - 40px);
      left: 50%;
      transform: translateX(-50%);
      right: auto;
    }
  
    .tutorial-message.mobile-hint {
      bottom: 100px;
      top: auto;
    }
  
    .tutorial-message .button-container {
      flex-direction: row;
      justify-content: space-between;
      width: 100%;
    }
  
    .tutorial-next, 
    .tutorial-end {
      margin: 0;
      width: 48%;
      min-width: auto;
    }
  }
  
  /* Landscape mode for mobile devices */
  @media screen and (max-width: 1024px) and (orientation: landscape) {
    /* Function menu positioning - vertical column on the right side */
    #function-menu {
      width: auto;
      height: calc(100% - var(--menu-height)); /* Reduce height to not overlap with nav menu */
      bottom: 0;
      top: var(--menu-height); /* Position it below the navigation menu */
      left: auto;
      right: 0;
      flex-direction: column;
      justify-content: flex-start; /* Change to flex-start instead of center */
      border-radius: 0;
      padding: 0; /* Remove vertical padding */
      gap: 0; /* Remove gap between items - will control with padding */
      overflow-y: auto; /* Enable scrolling if needed */
    }
    
    /* Adjust menu items for vertical layout */
    #function-menu .menu-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 8px 5px; /* Consistent padding for all screen sizes */
      margin: 0; /* Ensure no margins */
      height: auto; /* Let content determine height */
    }
    
    #function-menu .menu-item img {
      margin-bottom: 2px; /* Reduce space between icon and text */
    }
    
    #function-menu .menu-item::after {
      font-size: calc(var(--font-size-button) - 1px);
      margin-top: 2px;
      white-space: nowrap; /* Prevent text wrapping */
    }
    
    
    /* Panel positioning for landscape mode */
    .panel-container {
      width: 33%; /* 1/3 of the screen width */
      height: calc(100% - var(--menu-height)); /* Full height minus nav menu */
      left: 0;
      bottom: 0;
      top: var(--menu-height);
      border-radius: 0;
    }
    
    /* Reset panel heights for consistency in landscape */
    #dashboard-container,
    #chatbot-container,
    #procedures-container,
    #procedures-menu-container,
    #documents-SS00-container,
    #documents-SS00_01-container,
    #documents-SS00_02-container,
    #documents-SS01_01-container,
    #documents-SS01_02-container,
    #documents-SS01_03-container,
    #documents-SS01_04-container,
    #documents-SS01_05-container,
    #documents-SS01_06-container,
    #documents-SS01_07-container,
    #documents-SS02_01-container,
    #documents-SS02_02-container,
    #documents-SS02_03-container,
    #extras-container,
    #support-container,
    #info-container,
    #cut-container,
    #video-tutorial-container,
    #parts-SS00-container,
    #parts-SS00_01-container,
    #parts-SS00_02-container,
    #parts-SS01_01-container,
    #parts-SS01_02-container,
    #parts-SS01_03-container,
    #parts-SS01_04-container,
    #parts-SS01_05-container,
    #parts-SS01_06-container,
    #parts-SS01_07-container,
    #parts-SS02_01-container,
    #parts-SS02_02-container,
    #parts-SS02_03-container {
      height: calc(100% - var(--menu-height));
    }
    
    /* Canvas adjustments for landscape mode */
    .v3d-container.panel-open,
    .v3d-container.panel-open.large-container,
    .v3d-container.panel-open.small-container {
      height: 100% !important; /* Override the height from portrait mode */
      width: calc(100% - 33% - var(--menu-height)) !important; /* Account for panel width and function menu */
      left: 33% !important;
      right: var(--menu-height) !important;
    }
    
    /* Action menu positioning for landscape mode */
    .action-menu {
      position: fixed;
      width: auto;
      height: calc(100% - var(--menu-height));
      top: var(--menu-height);
      bottom: 0;
      left: auto;
      right: var(--menu-height);
      transform: none;
      background-color: var(--bg-menu);
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      align-items: center;
      border-right: 1px solid var(--transparent-white-10);
      border-left: 1px solid var(--transparent-white-10);
      z-index: var(--z-index-action-menu);
    }
    
    /* Reset all action buttons positions for landscape layout */
    #explode_button,
    #isolate_button,
    #buy_button,
    #document_button,
    #action_close {
      position: static;
      transform: none;
      width: auto;
      margin: 0;
      padding: 8px 5px;
      display: flex;
      flex-direction: column;
      align-items: center;
      background-color: transparent;
      border-radius: 0;
    }
    
    /* Style the action menu items like function menu items */
    .action-menu .action-item {
      background-color: transparent;
      box-shadow: none;
    }
    
    .action-menu .action-item.btn-pill {
      border-radius: 0;
      height: auto;
      padding: 8px 5px;
    }
    
    .action-menu .action-item img {
      margin-right: 0;
      margin-bottom: 2px;
      width: var(--icon-size-menu);
      height: var(--icon-size-menu);
    }
    
    .action-menu .action-item::after {
      content: attr(data-action);
      font-size: calc(var(--font-size-button) - 1px);
      color: var(--text-color-primary);
      text-transform: capitalize;
      display: block;
      margin-top: 2px;
      white-space: nowrap;
    }
    
    #action_close::after {
      content: "Close";
    }
    
    .action-menu .action-item.btn-pill .button-text {
      display: none;
    }
    
    /* Adjust tutorial and hints for landscape mode */
    .tutorial-message.mobile-hint {
      bottom: 20px;
      right: calc(var(--menu-height) + 10px);
      left: auto;
      transform: none;
    }
    
    /* Ensure scrolling works properly in landscape mode panels */
    .panel-content, 
    .table-content, 
    .chat-content {
      overflow-y: auto;
      max-height: calc(100% - 60px); /* 60px accounts for header height */
    }
  }
  
  /* Canvas container when no panels are open in landscape */
  @media screen and (max-width: 1024px) and (orientation: landscape) {
    #v3d-container:not(.panel-open) {
      width: calc(100% - var(--menu-height)) !important;
      right: var(--menu-height) !important;
      left: 0 !important;
    }
  }
  
  /* iPhone SE and very small devices */
  @media screen and (max-width: 375px) and (max-height: 667px) {
    /* App title - make it fit on small screen */
    #app-title {
      font-size: 16px;
      white-space: nowrap;
      overflow: visible;
    }
    
    /* Tighter spacing in header */
    .nav-left {
      margin-left: 5px;
    }
    
    .nav-right {
      margin-right: 5px;
      gap: 10px;
    }
    
    /* Fix bottom menu text for narrow screens */
    #function-menu {
      padding: 0 8px;
    }
    
    #function-menu .menu-item {
      padding: 8px 2px;
    }
    
    #function-menu .menu-item::after {
      font-size: 11px;
      white-space: nowrap; 
      font-weight: var(--font-weight-semibold);
    }
    
    /* Smaller buttons */
    .btn-circle {
      width: 36px;
      height: 36px;
    }
  
    /* Use same panel heights as standard mobile view for consistency */
    #dashboard-container,
    #chatbot-container{
      height: 50vh; 
    }
  
    #procedures-container,
    #procedures-menu-container,
    #documents-SS00-container,
    #documents-SS00_01-container,
    #documents-SS00_02-container,
    #documents-SS01_01-container,
    #documents-SS01_02-container,
    #documents-SS01_03-container,
    #documents-SS01_04-container,
    #documents-SS01_05-container,
    #documents-SS01_06-container,
    #documents-SS01_07-container,
    #documents-SS02_01-container,
    #documents-SS02_02-container,
    #documents-SS02_03-container,
    #extras-container,
    #support-container,
    #info-container,
    #cut-container,
    #video-tutorial-container,
    #parts-SS00-container,
    #parts-SS00_01-container,
    #parts-SS00_02-container,
    #parts-SS01_01-container,
    #parts-SS01_02-container,
    #parts-SS01_03-container,
    #parts-SS01_04-container,
    #parts-SS01_05-container,
    #parts-SS01_06-container,
    #parts-SS01_07-container,
    #parts-SS02_01-container,
    #parts-SS02_02-container,
    #parts-SS02_03-container {
      height:25vh;
    }
    
    /* Landscape mode specific adjustments for very small devices */
    @media (orientation: landscape) {
      #function-menu {
        padding: 0; /* Remove padding completely */
        justify-content: center; /* Ensure vertical centering */
        gap: 0; /* Minimize gap for space efficiency */
      }
      
      #function-menu .menu-item {
        padding: 4px 2px; /* Minimum padding for small screens */
        min-height: 50px; /* Ensure minimum height for touch targets */
      }
      
      #function-menu .menu-item img {
        width: 24px; /* Smaller icons */
        height: 24px;
      }
      
      #function-menu .menu-item::after {
        font-size: 9px; /* Smaller text */
        margin-top: 1px;
      }
      
      .panel-container {
        width: 40%; /* Slightly wider panel for very small screens */
      }
      
      .v3d-container.panel-open,
      .v3d-container.panel-open.large-container,
      .v3d-container.panel-open.small-container {
        width: calc(100% - 40% - var(--menu-height)) !important;
        left: 40% !important;
      }
    }
  }
  
  /* Tablets and small desktops */
  @media screen and (min-width: calc(var(--breakpoint-md) + 1px)) and (max-width: var(--breakpoint-lg)) {
    .panel-container {
      width: 360px;
      height: 60vh;
    }
    
    /* Center panels better on tablets */
    #dashboard-container,
    #procedures-container,
    #procedures-menu-container,
    #documents-SS00-contain er,
    #documents-SS00_01-container,
    #documents-SS00_02-container,
    #documents-SS01_01-container,
    #documents-SS01_02-container,
    #documents-SS01_03-container,
    #documents-SS01_04-container,
    #documents-SS01_05-container,
    #documents-SS01_06-container,
    #documents-SS01_07-container,
    #documents-SS02_01-container,
    #documents-SS02_02-container,
    #documents-SS02_03-container,
    #parts-SS00-container,
    #parts-SS00_01-container,
    #parts-SS00_02-container,
    #parts-SS01_01-container,
    #parts-SS01_02-container,
    #parts-SS01_03-container,
    #parts-SS01_04-container,
    #parts-SS01_05-container,
    #parts-SS01_06-container,
    #parts-SS01_07-container,
    #parts-SS02_01-container,
    #parts-SS02_02-container,
    #parts-SS02_03-container,
    #extras-container,
    #support-container,
    #info-container,
    #cut-container,
    #chatbot-container,
    #video-tutorial-container {
      right: 50%;
      transform: translateX(50%) translateY(-50%);
    }
  }
  
  /* Large desktops - optimize for larger screens */
  @media screen and (min-width: var(--breakpoint-xl)) {
    :root {
      /* Slightly larger elements for high-resolution displays */
      --panel-width: 420px;
      --panel-height: 720px;
      --font-size-normal: 16px;
      --font-size-title: 20px;
    }
    
    .panel-container {
      right: 5%;
    }
    
    /* Larger, more spaced elements */
    .panel-padding {
      padding: 18px;
    }
    
    .indicator-container {
      height: 10px;
    }
    
    /* Prevent panels from getting too small relative to screen */
    #function-menu {
      width: 480px;
      height: 70px;
    }
    
    .btn-circle {
      width: 44px;
      height: 44px;
    }
  }
  
  /* Remove specific class-based legend styling that's no longer needed */
  .status-legend div:nth-child(1)::before,
  .status-legend div:nth-child(2)::before,
  .status-legend div:nth-child(3)::before,
  .status-legend div:nth-child(4)::before,
  .status-legend div:nth-child(5)::before,
  .status-legend div:nth-child(6)::before,
  .status-legend div:nth-child(7)::before,
  .functional,
  .recently-serviced,
  .maintenance,
  .scheduled-check,
  .pending-inspection,
  .under-repair,
  .critical,
  .legend-dot.functional,
  .legend-dot.maintenance,
  .legend-dot.critical,
  .legend-dot.under-repair,
  .legend-dot.recently-serviced,
  .legend-dot.scheduled-check,
  .legend-dot.pending-inspection {
    /* These are no longer needed as we use inline styles */
    background-color: transparent;
  }